<template>
	<view class="container" :style="'min-height:' +pageHei+';'">
		<uni-search-bar cancelText="确定" @cancel="searchItem" v-model="searchText" @confirm="searchItem"
			bgColor="#FFFFFF" :radius="30" placeholder="请输入要搜索的名称"></uni-search-bar>
		<u-sticky bgColor="#fff">
			<u-tabs :list="tabList" :scrollable="false" @click="clickTab"></u-tabs>
		</u-sticky>
		<view class="use-box u-p-y-20 u-p-x-20" v-if="version == 1" v-for="(item,index) in acList" :key="index"
			style="border-top: 1rpx solid #EEEEEE;">
			<view class="u-flex" @click="toUrl(`/pages/index/cardIndex/index?useId=${item.craftsmanId}`)">
				<image class="use-img"
					:src="'https://www.ydylmold.cn/images/ydylapp/usrCraftsman/image/'+item.headImg" mode=""></image>
				<view class="u-flex u-flex-col u-col-top u-row-between u-m-x-20">
					<text class="use-name">{{item.usrName }}</text>
					<text class="use-level">{{item.vipTypeName?'会员用户':'普通用户'}}</text>
				</view>
			</view>
		</view>
		<view class="use-box u-p-y-20 u-p-x-20" v-else v-for="(item,index) in acList" :key="index"
			style="border-top: 1rpx solid #EEEEEE;">
			<view class="u-flex" @click="$store.commit('toUserIndex',item)">
				<image class="use-img"
					:src="'https://www.ydylmold.cn/images/ydylapp/usrCompany/image/'+item.companyLogo" mode=""></image>
				<view class="u-flex u-flex-col u-col-top u-row-between u-m-x-20">
					<text class="use-name">{{item.companyNameCn }}</text>
					<text class="use-level">{{item.vipTypeName?'会员用户':'普通用户'}}</text>
				</view>
			</view>
		</view>
		<view class="btn-box">
			<button type="primary" class="btn-yao"
				@click="toUrl('/pages/meSub/myInvitation/invitationPoster')">邀请</button>
			<!-- #ifdef MP-WEIXIN -->
			<button type="primary" style="background-color: #FFFFFF;border: 1rpx solid #0080FF;color: #0080FF;"
				class="btn-yao" @click="toUrl('/pages/meSub/myInvitation/invitaionBill')">明细</button>
			<!-- #endif -->
		</view>
		<view class="digit">共<text style="color: #0080FF;">{{acList.length}}</text>位</view>
		<my-empty tipText="数据为空" v-if="isEmpty" image="http://cdn.uviewui.com/uview/empty/data.png"></my-empty>
		<u-loadmore :status="status" v-else></u-loadmore>
		<my-auth-modal></my-auth-modal>
	</view>
</template>
<script>
	import {
		queryLevelTwoMyteam,
		queryMyTeam,
		queryMyTeamComp,
		queryLevelTwoMyteamComp
	} from '@/common/api/auth.js'
	import {
		getToken,
		setToken
	} from '@/utils/token.js'
	import {
		duplicateRemoval
	} from '@/utils/common.js'
	export default {
		data() {
			return {
				tabList: [{
					name: '直推',
				}, {
					name: '间推',
				}],
				pageHei: '100vh',
				currPage: 1,
				searchText: '',
				version: getToken('version'),
				acList: [],
				allpage: 1,
				status: 'loading',
				acIndex: 0,
				isEmpty: false
			}
		},
		onLoad: function() {
			uni.getSystemInfo({
				success: (res) => {
					this.pageHei = res.windowHeight * 2 + 'rpx'
				}
			})
			this.getNewList()
		},
		onReachBottom: function() {
			if (this.status == 'loadmore') {
				this.currPage++
				this.getNewList()
			}
		},
		onNavigationBarButtonTap(e) {
			uni.$u.route({
				url: '/pages/meSub/myInvitation/invitaionBill',
			})
		},
		methods: {
			toUrl(path) {
				uni.$u.route({
					url: path,
				})
			},
			searchItem(e) {
				this.currPage = 1
				this.acList = []
				this.getNewList()
			},
			getNewList() {
				if (this.acIndex == 0) {
					this.queryMyTeam()
				} else {
					this.queryLevelTwoMyteam()
				}
			},
			queryLevelTwoMyteam() {
				let params = {
					entityType: 1,
					searchText: this.searchText,
					'page.current': this.currPage
				}
				if (this.version == 1) {
					params['parentCraftsmanId'] = getToken('useNum')
					queryLevelTwoMyteam(params).then(res => {
						if (res.statusCode == 200) {
							this.setData(res, 'usrName')
						}
					})
				} else {
					params['parentCompanyId'] = getToken('useNum')
					queryLevelTwoMyteamComp(params).then(res => {
						if (res.statusCode == 200) {
							this.setData(res, 'usrName')
						}
					})
				}
			},
			setData(res, filter) {
				this.acList = duplicateRemoval(this.acList, res.data && res.data && res.data.rows || [], filter)
				this.allpage = res.data && res.data.total
				this.currPage < this.allpage ? this.status = 'loadmore' : this.status = 'nomore'
				this.isEmpty = this.acList.length == 0 ? true : false
			},
			queryMyTeam() {
				let params = {
					entityType: 1,
					searchText: this.searchText,
					'page.current': this.currPage,
				}
				this.status = 'loading'
				if (this.version == 1) {
					params['parentCraftsmanId'] = getToken('useNum')
					queryMyTeam(params).then(res => {
						if (res.statusCode == 200) {
							this.setData(res, 'craftsmanId')
						}
					})
				} else {
					params['parentCompanyId'] = getToken('useNum')
					queryMyTeamComp(params).then(res => {
						if (res.statusCode == 200) {
							this.setData(res, 'companyId')
						}
					})
				}
			},
			clickTab(data) {
				this.acIndex = data.index
				this.acList = []
				this.currPage = 1
				this.getNewList()
			}
		}
	}
</script>
<style lang="scss">
	.container {
		background-color: #F8F8F8;
		padding-bottom: 120rpx;

		.digit {
			font-size: 28rpx;
			letter-spacing: 4rpx;
			margin-top: 10rpx;
			display: flex;
			justify-content: flex-end;
			padding: 0 20rpx
		}

		.use-box {
			background-color: #FFFFFF;
			border-bottom: 1rpx solid #EEEEEE;

			.use-img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}

			.use-name {
				font-size: 32rpx;
			}

			.use-level {
				font-size: 24rpx;
				color: #666666;
				line-height: 60rpx;
			}
		}

		.btn-box {
			position: fixed;
			background-color: #fff;
			bottom: 0;
			width: 750rpx;
			padding: 15rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;

			.btn-yao {
				// width: 500rpx;
				flex: 1;
				margin: 0 20rpx;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #0080FF;
			}
		}
	}
</style>
